import React from 'react'
import { Link } from 'react-router-dom'
import { Layout, Menu } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import './layout.css'
import Routes from '../Routes'
const { Header, Content, Footer, Sider } = Layout

const App = (props) => {
  const { location } = props
  const { pathname } = location

  return (
    <Layout>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
      >
        <div className="app-logo" />
        <Menu theme="dark" mode="inline" defaultSelectedKeys={[pathname]}>
          <Menu.Item key="/sale-list" icon={<UserOutlined />}>
            <Link to="/sale-list">购买记录</Link>
          </Menu.Item>
          <Menu.Item key="/give-list" icon={<UserOutlined />}>
            <Link to="/give-list">捐赠记录</Link>
          </Menu.Item>
          <Menu.Item key="/user-list" icon={<UserOutlined />}>
            <Link to="/user-list">用户列表</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Header className="site-layout-sub-header-background" style={{ padding: '0px 16px', textAlign: 'right' }}>超级管理员</Header>
        <Content className="site-layout-content">
          <Routes />
        </Content>
        <Footer style={{ textAlign: 'center' }}>Admin ©2020 Created</Footer>
      </Layout>
    </Layout>
  )
}

export default App